<html>
    <head>
        <link rel="stylesheet" href="/static/main.css"/>
        <link rel="stylesheet" href="/static/boxy.css"/>

        <script type="text/javascript" src="/static/jquery-1.4.2.min.js"></script>
        {#boxy#}
        <script type="text/javascript" src="/static/javascripts/jquery.boxy.js"></script>

        <script type="text/javascript">
            // current cite id
            var cid = {{ cite.id }};

            $(function(){
                // add a comment
                $('.post-comment').click(function(){
                    var cm = $('textarea.comment').val().trim();
                    $('textarea.comment').val("");
                    if( cm.length > 0){
                        $.getJSON('/comment',{ cid: cid, comment: cm}, function(data){
                            if( data.success == true ){
                                $('div.comments div.list').append("<div class='comment'>" + cm + "</div>");
                            }
                        });
                    } else {}
                });

                // up/down rate
                function sendRate( pm ){
                    var url = pm > 0 ? '/up' : '/down';
                    $.getJSON( url, { cid: cid }, function( data ){
                        $('.plus-rate, .minus-rate').remove();
                        // update rate here
                        if( data.success == true ){
                            $(".rate").html( data.rate );
                        }

                        
                    });
                };
                $('.plus-rate').click(function(){ sendRate(1); });
                $('.minus-rate').click(function(){ sendRate(-1); });

                // add cite
                $('input#add-cite').click(function(){
                    var c = $('textarea.cite').val();
                    if( c.length > 0){
                        $.getJSON('/cite',{ cite: c}, function( data ){
                            // dumb here
                        });
                    } else {
                        alert("EMPTY");
                    }

                });
		$('.add-cite').click(function(){
			new Boxy("<div style='width: 400px; height: 150px;padding: 15px;'>" + 
				"Кстати:<br/><textarea class='new-cite'/><div style='text-align: center'>" + 
                                "<a class='post'>сказать</a><img src='/static/comment1.png'/>" +
				"<a class='close'>закрыть</a><img src='/static/close.png'/>" + 
                                "</div></div>",
			{ modal: true, afterShow: function(dlg){
				var dlg = this;
				var cnt = dlg.getContent();
				$('.close',cnt).click( function(){	
					dlg.hide();
					dlg.unload();
				});
				$('.post',cnt).click( function(){
					var val = $('.new-cite').val();
					if( val.trim().length > 0){
						$.getJSON('/cite',{ cite: val }, function( data ){
							
						});
					}else{

					}
					dlg.hide();
					dlg.unload();
				});
			} });
		});
            });
        </script>
    </head>

    <body>
    <center>
        <table width="60%" height="100%" cellpadding="0" cellspacing="0">
            <tr class="header">
                <td>
                    <div class="header">
                       <img src="/static/logo.png"/>
                    </div>
                </td>
            </tr>
            <tr><td class="descr">Пара фактов, о которых ты не знал...</td></tr>
            <tr><td></td></tr>
            <tr class="main">
                <td>
                    <table cellpadding="0" cellspacing="0" width="100%" height="100%">
                        <tr>
                            <td width="20%"></td>
                            <td class="center">
                                <h1 class='cite'> {{ cite.cite }}<span class="rates">
                                    <img src="/static/arrow-down.png"
                                         class="minus-rate"/>&nbsp;<img src="/static/arrow-up.png"
                                         class="plus-rate"/>&nbsp;<span class="rate">{{ cite.rate }}</span>
                                </span></h1>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="comments">
                        <div class="list">
                            <h4> Говорят: </h4>
                            {% for cm in comments %}
                                <div class="comment">
                                    {{ cm.comment }}
                                </div>
                            {% endfor %}
                        </div>

                        <textarea rows="5" class="comment"></textarea><br/>
                        <div style="text-align: center">
                            <a class="post-comment">сказать</a><img src="/static/comment1.png"/>
                        </div>

                    </div>
                </td>
            </tr>
            <tr class="footer">
                <td>
                    <div class="info">Если что то вас беспокоит, то пишите на dumbstudios@somefacts.ru </div>
                </td>
            </tr>
        </table>
    </center>
        <div class="add-cite">
        </div>
    </body>
</html>
